<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>练习5</title>	
		<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> 
		<script>
		// 雷德亮 219970111	
		$(function () {		
		    // 鼠标点击移动		
		    $(".back").click(function (e) {		
		        var x = e.pageX;		
		        var y = e.pageY;				
		        var left = $("img").offset().left;		
		        var top = $("img").offset().top;	
		        if (x - left >= 0) {		
		            $("img").attr("src","img/player_right.gif");	
		        } else if (x - left <0) {	
		            $("img").attr("src", "img/player_left.gif")		
		        }		
		        $("img").stop().animate({		
		            left: x - 50,		
		            top: y - 50		
		        }, 1000)		
		    })		
		    // 双击变身，再双击还原		
            $("img").dblclick(function () {		
		        $("img").attr("src", "img/playerbig_right.gif"); 
				$("img").dblclick(function(){		
		            $("img").attr("src","img/player_right.gif");		
		        })
                    var oBtn = document.getElementById('clickBtn');
                    oBtn.ondblclick = function(){
                        console.log('双击');
                    }
            })		
          	
		    // 键盘移动		
		    $(window) .keydown(function(e){		
		        let top=parseInt($("img").css("top"));		
		        let left=parseInt($("img").css("left"));		
		        if(e.keyCode==87||e.keyCode==38){
		            $("img").css("top",top-50);		
		        }else if(e.keyCode==83||e.keyCode==40){		
		            $("img").css("top",top+50);		
		        }else if(e.keyCode==65||e.keyCode==37){		
		            $("img").attr("src","img/player_left.gif")		
		            $("img").css("left",left-50);		
		        }else if(e.keyCode==68||e.keyCode==39){		
		            $("img").attr("src","img/player_right.gif")		
		            $("img").css("left",left+50);	
				}
		    })		
		})
		</script> 
		<style> 
		    *{		
		        margin: 0; 
				padding: 0;	
			}
		    .back{width: 100vw;		
		        height: 100vw; 
				background-color: #000; 
			}		
			img{	
				position: absolute;
				width: 100px; 
				height: 100px; 
			}		
		</style> 
	</head> 
	<body>		
		<div class="back">		
		<img src= "img/player_right.gif"alt=""> 
		</div>		
	</body>
</html>

    </body>
</html>